<template>
  <div>
    <div class="my-body">
      <el-row>
        <el-col :span="24">
          <div class="ipt_a">
            <div style="float: left; line-height: 30px" class="tab_font-size">
              医院地区：
            </div>
            <el-input
              v-model="input"
              placeholder="请输入内容"
              style="width: 150px; height: 50px; float: left"
            ></el-input>
          </div>
          <div class="ipt_a">
            <div style="float: left; line-height: 30px" class="tab_font-size">
              订货状态：
            </div>
            <el-select v-model="value" placeholder="请选择">
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </div>

          <div class="ipt_b">
            <div style="float: left; line-height: 30px" class="tab_font-size">
              申请日期
            </div>
            <div style="margin-left: 20px; float: left">
              <el-date-picker
                v-model="value1"
                type="daterange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
              >
              </el-date-picker>
            </div>
          </div>
        </el-col>
      </el-row>
      <div>
        <el-button type="primary" primary plain>查询</el-button>
        <el-button primary plain>清空</el-button>

        <el-dialog
          title="地区选择"
          :visible.sync="area"
          width="30%"
          :before-close="handleClose"
        >
          <div style="width: 100%">
            <div>福建省全境(s350)</div>
            <div style="margin-top: 30px">
              <el-button type="success" plain>放弃返回</el-button>
              <el-button type="primary">确定提交</el-button>
            </div>
          </div>
        </el-dialog>
        <div style="margin-top: 30px">
          <template>
            <el-table
              :data="
                tableData.slice(
                  (currentPage - 1) * pageSize,
                  currentPage * pageSize
                )
              "
              style="width: 100%"
              border
              fit
              size="medium"
             :header-cell-style="{background:'#f5f7fa',color:'#606266'}"
            >
              <el-table-column type="selection" width="55"> </el-table-column>
              <el-table-column
                fixed
                prop="bianhao"
                label="申请编号"
                width="150"
              >
              </el-table-column>
              <el-table-column prop="senddate" label="申领日期" width="120">
              </el-table-column>
              <el-table-column prop="enddate" label="申领类型" width="120">
              </el-table-column>
              <el-table-column prop="name" label="申领医院或地区" width="120">
              </el-table-column>
              <el-table-column prop="province" label="申领状态" width="120">
              </el-table-column>
              <el-table-column prop="address" label="申领方" width="200">
              </el-table-column>
              <el-table-column prop="shouqfang" label="收货人" width="200">
              </el-table-column>
              <el-table-column prop="jingxiaos" label="收货地址" width="200">
              </el-table-column>
              <el-table-column prop="jingxiaos" label="财务发票" width="200">
              </el-table-column>
              <el-table-column prop="jingxiaos" label="签字回单" width="200">
              </el-table-column>
              <el-table-column prop="jingxiaos" label="备注" width="200">
              </el-table-column>
            </el-table>
            <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="currentPage"
              :page-sizes="[5, 10]"
              :page-size="pageSize"
              :total="tableData.length"
              layout="total, sizes, prev, pager, next, jumper"
            >
            </el-pagination>
          </template>
        </div>
      </div>
    </div>

    <div class="my-body">
      <div>
        <div style="float: left">
          <el-button type="primary" plain>查看物流</el-button>
          <el-button type="danger" plain>订单货</el-button>
        </div>

        <div
          style="
            float: left;
            margin-left: 20px;
            line-height: 30px;
            font-weight: 600;
          "
        >
          申请信息:申请编号【DH037807742409180001】应付货款【47422】
        </div>
        <div style="width: 100%; float: left; margin-top: 20px">
          <template>
            <el-table
              :data="
                tableData.slice(
                  (currentPage - 1) * pageSize,
                  currentPage * pageSize
                )
              "
              style="width: 100%"
              border
              fit
              size="medium"
             :header-cell-style="{background:'#f5f7fa',color:'#606266'}"
            >
              <el-table-column type="selection"> </el-table-column>
              <el-table-column fixed prop="bianhao" label="产品系列">
              </el-table-column>
              <el-table-column prop="senddate" label="产品类型">
              </el-table-column>
              <el-table-column prop="enddate" label="产品规格">
              </el-table-column>
              <el-table-column prop="province" label="订货数量">
              </el-table-column>
            </el-table>
            <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="currentPage"
              :page-sizes="[5, 10]"
              :page-size="pageSize"
              :total="tableData.length"
              layout="total, sizes, prev, pager, next, jumper"
            >
            </el-pagination>
          </template>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getData, postData } from "@/utils/request.js";
export default {
  data() {
    return {
      key: 1, // 为了能每次切换权限的时候重新初始化指令
      options: [
        {
          value: "1",
          label: "全部",
        },
        {
          value: "2",
          label: "已签收",
        },
        {
          value: "3",
          label: "未签收",
        },
      ],
      data: [
        {
          label: "中国大陆",
          children: [
            {
              label: "上海",
            },
            {
              label: "北京",
            },
            {
              label: "四川",
            },
          ],
        },
      ],
      value1: "",
      defaultProps: {
        children: "children",
        label: "label",
      },
      value: "",
      chanpingguige: false,
      dialogVisible: false,
      dialogVisiblea: false,
      hospital: false,
      area: false,
      currentPage: 1,
      pageSize: 5,
      jinxiaoshang: false,
      shouhuor: false,
      diquxuanzhe: false,
      tableData: [],
      form: {
        name: "",
        region: "",
        date1: "",
        date2: "",
        delivery: false,
        type: [],
        resource: "",
        desc: "",
      },
      sizeForm: {
        name: "",
        region: "",
        date1: "",
        date2: "",
        delivery: false,
        type: [],
        resource: "",
        desc: "",
      },
    };
  },
  created(){
   this.list()
  },
  methods: {
    list() {
      var data = {
        page: 1,
        limit: 100,
        token: localStorage.getItem("token"),
      };
      postData("approval.sample/indexlist", data).then((res) => {
        // 处理响应数据
        if (res.code == 0) {
          console.log(res);
          this.tableData = res.data.data;
        } else {
        }
      });
    },
    onSubmit() {
      console.log("submit!");
    },
    handleClose(done) {
      done();
      // this.$confirm('确认关闭？')
      // 	.then(_ => {
      // 		done();
      // 	})
      // 	.catch(_ => {});
    },

    handleClick(row) {
      console.log(row);
    },
    handleSizeChange(val) {
      this.pageSize = val;
    },
    handleCurrentChange(val) {
      this.currentPage = val;
    },
  },
};
</script>

<style lang="scss" scoped>
.ipt_a {
  width: 300px;
  height: 50px;
  float: left;
}

.ipt_b {
  width: 450px;
  height: 50px;
  float: left;
}

.listdizhi {
  width: 100%;
  height: 100px;
  float: left;
  border-bottom: 1px solid;
}

.lie {
  width: 90%;
  height: 100%;
  float: left;
}

.listdizhia {
  width: 100%;
  height: 50px;
  float: left;
}

.listdizhia div {
  float: left;
  margin-left: 30px;
}
</style>